<template>
	<view class="page">
		  <view class="top">
		  	<view class="title">
		  		总金额(元)
		  	</view>
			<view class="moneyline">
				<view class="money">
					{{total}}
				</view>
				<view class="tixian" @click="tixian">
					提现
				</view>
			</view>
			<view class="toptab">
				<view class="itemtop">
					<view class="money">
						{{daiti}}
					</view>
					<view class="label">
						待提现
					</view>
				</view>
				<view class="itemtop" @click="dairuzhang">
					<view class="money">
						{{dairu}}
					</view>
					<view class="label">
						待入账
					</view>
				</view>
			</view>
			
		  </view>
		  <view class="bodybox">
			  <view class="titleline">
			  	  <view class="boxtitle">
			  	  	收支明细
			  	  </view>
				  <view class="pickerbox">
				  	<picker @change="bindPickerChange" :value="index" :range="array" range-key="label">
				  		<view class="picker">{{array[index].label}}  <view class="iconfont icon-xiangxia2"></view> </view>
				  	</picker>
				  </view>
			  </view>
			  <view class="typetabbox">
			  	<view class="itemtype" :class="type==0?'act':''" @click="selecttype(0)">
			  		全部
					<view class="line"></view>
			  	</view>
				<view class="itemtype" :class="type==1?'act':''" @click="selecttype(1)">
					收入
					<view class="line"></view>
				</view>
				<view class="itemtype" :class="type==2?'act':''" @click="selecttype(2)">
					支出
					<view class="line"></view>
				</view>
			  </view>
			  <view class="list">
			  	<view class="itemlist" v-for="item in alllist" :key="item.id">
			  		<view class="left">
			  			 <view class="iconfont icon-shoukuandan">
			  			 	
			  			 </view>
						 <view class="contentbox">
						 	<view class="name">
						 		{{item.yrMode==0?'收入':'支出'}}{{item.yrContent}}
						 	</view>
							<view class="time">
								{{item.updateTime}}
							</view>
						 </view>
			  		</view>
					<view class="right">
						<view class="money">
							{{item.yrPrice}}
						</view>
						<view class="iconfont icon-xiangyou1">
							
						</view>
					</view>
			  	</view>
			  </view>
		  	
		  </view>
	</view>
</template>

<script>
	import {myWalletDetail} from '../../utils/api.js'
	export default {
		data() {
			return {
				dairu:'',
				daiti:'',
				type:0,
				list:[],
				alllist:[],
				type1list:[],
				type2list:[],
				index:0,
				total:'',
				array:[
					{
						type:'7',
						label:'近7天'
					},
					{
						type:'30',
						label:'近一个月'
					}
				],
			}
		},
		onShow(){
			let p={
				phone:uni.getStorageSync('phone'),
				day:7
			}
			myWalletDetail(p).then(res=>{
				console.log(res)
				this.dairu=res.data.data.dairuzhang
				this.daiti=res.data.data.daitixian
				this.total=res.data.data.total
				this.list=res.data.data.records
				// 根据 type 分成两组
				this.alllist=res.data.data.records
				this.type1list = this.list.filter(item => item.yrMode == 0)
				this.type2list = this.list.filter(item => item.yrMode != 0)
				console.log(this.type2list)
			})
		},
		methods: {
			
			dairuzhang(){
				uni.navigateTo({
					url:'/pagesA/dairuzhang/dairuzhang'
				})
			},
			selecttype(e){
				this.type=e
				console.log(e)
				if(e==0){
					this.alllist=this.list
				}
				if(e==1){
					this.alllist=this.type1list
				}
				if(e==2){
					this.alllist=this.type2list
				}
				
				
			},
			bindPickerChange(e){
				this.index=e.detail.value
				let p={
					phone:uni.getStorageSync('phone'),
					day:this.array[this.index].type
				}
				myWalletDetail(p).then(res=>{
					console.log(res)
					this.dairu=res.data.data.dairuzhang
					this.daiti=res.data.data.daitixian
					this.list=res.data.data.records
					// 根据 type 分成两组
					this.type1List = list.filter(item => item.type === 1)
					this.type2List = list.filter(item => item.type !== 1)
				})
			},
			tixian(){
				let money=this.daiti
			   uni.navigateTo({
			   	url:'/pagesA/tixian/tixian?money='+money
			   })	
			},
		}
	}
</script>

<style lang="less" scoped>
   .page{
	   width: 750rpx;
	   box-sizing: border-box;
	   padding: 20rpx;
	   .top{
		   width: 100%;
		   height: 350rpx;
		   background-color: #1a4f8a;
		   color: white;
		   box-sizing: border-box;
		   padding: 30rpx;
		   border-radius: 20rpx;
		   .title{
			   line-height: 2;
		   }
		   .moneyline{
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   margin-top: 20rpx;
			   padding-bottom: 40rpx;
			 
			   .money{
				   font-size: 38rpx;
				   font-weight: bold;
			   }
			   .tixian{
				   width: 150rpx;
				   height: 60rpx;
				   line-height: 60rpx;
				   background-color: white;
				   color: black;
				   text-align: center;
				   border-radius: 30rpx;
			   }
		   }
		   .toptab{
			   display: flex;
			   align-items: center;
			   margin-top: 20rpx;
			   justify-content: space-evenly;
			   font-weight: bold;
			   text-align: center;
		   }
	   }
	   .bodybox{
		   width: 100%;
		   border-radius: 20rpx;
		   margin-top: 20rpx;
		 
		  
		   box-sizing: border-box;
		   padding: 20rpx;
		   .titleline{
			   width: 100%;
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			   .boxtitle{
				   font-weight: bold;
			   }
			   .pickerbox{
				   width: 150rpx;
				   height: 40rpx;
				   .picker{
					  width: 150rpx;
					  height: 40rpx; 
					  display: flex;
					  align-items: center;
					  font-size: 28rpx;
					  font-weight: bold;
				   }
			   }
		   }
		   .typetabbox{
			   display: flex;
			   align-items: center;
			   font-size: 28rpx;
			   margin-top: 30rpx;
			   .itemtype{
				   width: 120rpx;
				   text-align: center;
				   color: gray;
				   .line{
					   width: 50rpx;
					   height: 8rpx;
					   border-radius: 4rpx;
					   margin: 10rpx auto;
				   }
			   }
			   .act{
				   font-weight: bold;
				   color: black;
				   .line{
					   background-color: #1a4f8a;
				   }
			   }
			   
		   }
		   .list{
			   width: 100%;
			   .itemlist{
				   width: 92%;
				   margin:14rpx auto;
				   display: flex;
				   align-items: center;
				   
				   justify-content: space-between;
				   .left{
					   width: 60%;
					   display: flex;
					   align-items: center;
					   .iconfont{
						   font-size: 40rpx;
						   font-weight: bold;
						   color: #1a4f8a;
						   margin-right: 10rpx;
					   }
					   .contentbox{
						   .name{
							   font-weight: bold;
						   }
						   .time{
							   font-size: 26rpx;
							   color: gray;
						   }
					   }
				   }
				   .right{
					   display: flex;
					   align-items: center;
					   .money{
						  
						   font-weight: bold;
					   }
					   .lv{
					   						   color: green;
					   }
					   .orange{
					   						   color: orangered;
					   }
					   .iconfont{
						   color: grey;
					   }
				   }
				   
			   }
			   
		   }
	   }
	   
	   
   }
</style>
